import { useState } from "react";

import BlindBox from "./components/BlindBox";
import CardList from "./components/CardList";
import Modal from "@/components/Modal";
import "./index.scss";

const Nft = () => {
  const [open, setOpen] = useState(false);
  const [modalType, setModalType] = useState(-1);



  /**
   * 打开弹窗
   */
  const openModal = (type: number) => {
    setModalType(type);
    setOpen(true);
  };

  // 列表数据
  const listData = [] as any;

  for (let i = 1; i < 30; i++) {
    const ran = Math.floor(Math.random() * 2);
    listData.push({
      id: i,
      name: ran == 0 ? "算力收入" : "(赎回钻石)ZS",
      datetime: "2024-12-01  12:00",
      type: ran,
      power: Math.floor(Math.random() * 100),
    });
  }

  // 盲盒介绍
  const modalContent = (
    <div className="blind-box-mechanism">
      <p>
        • Total Blind Boxes: <span className="highlight">10,000</span>
      </p>
      <p>• Blind Box Pricing: Each blind box is priced at 100 USDT</p>
      <p>
        • Blind Box Rewards:{" "}
        <span className="highlight">100% winning rate</span>, with a chance to
        randomly obtain NFTs of 6 different levels. The minimum boost is +100
        Power, and the maximum boost is +10,000 Power. Multiple NFTs can be
        stacked for higher bonuses.
      </p>
      <p>
        • NFTs are a vital component of the Mr. Knows-It-All Metaverse. They not
        only serve as the core means of obtaining computing power but also
        embody collectible, upgradeable, and community identity value. NFTs can
        be freely traded in the marketplace!
      </p>
      <div className="hd">
        <span className="th1">Level</span>
        <span className="th2">Probability</span>
        <span className="th3">NFT Quantity</span>
        <span className="th4">Power Bonus</span>
      </div>
      <div className="bd">
        <div className="item">
          <span className="th1">Common</span>
          <span className="th2">80.00%</span>
          <span className="th3">8,000</span>
          <span className="th4">+100</span>
        </div>
        <div className="item">
          <span className="th1">Rare</span>
          <span className="th2">10.00%</span>
          <span className="th3">1,000</span>
          <span className="th4">+500</span>
        </div>
        <div className="item">
          <span className="th1">Epic</span>
          <span className="th2">5.00%</span>
          <span className="th3">500</span>
          <span className="th4">+1,000</span>
        </div>
        <div className="item">
          <span className="th1">Legendary</span>
          <span className="th2">3.00%</span>
          <span className="th3">300</span>
          <span className="th4">+2,500</span>
        </div>
        <div className="item">
          <span className="th1">Mythic</span>
          <span className="th2">1.8%</span>
          <span className="th3">180</span>
          <span className="th4">+5,000</span>
        </div>
        <div className="item">
          <span className="th1">Supreme</span>
          <span className="th2">0.2%</span>
          <span className="th3">20</span>
          <span className="th4">+10,000</span>
        </div>
      </div>
    </div>
  );

  // 合并弹窗内容
  const combineContet = (
    <div className="combine-modal-container">
      <div className="card-list">
        <div className="card-box">
          <img src="/images/nft_card_add.png" alt="" />
          <div className="name">Select NFT</div>
        </div>
        <div className="card-box">
          <img src="/images/nft_card_add.png" alt="" />
          <div className="name">Select NFT</div>
        </div>
      </div>
      <div className="desc">
      MUI offers a comprehensive suite of free UI tools to help you ship new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.
      </div>
      {/* 合成按钮 */}
      <div className="btn-box">
        <div className="btn">Combine</div>
      </div>
    </div>
  );

  return (
    <>
      <div className="nft-container">
        {/* 开盲盒 */}
        <BlindBox openModal={openModal} />
        {/* 卡片列表 */}
        <CardList openModal={openModal} />
      </div>
      {/* 弹窗 */}
      <Modal
        onClose={setOpen}
        open={open}
        title={
          modalType == 1
            ? "Blind Box Mechanism"
            : modalType == 2
            ? "Combine NFT"
            : null
        }
        content={
          modalType == 1 ? modalContent : modalType == 2 ? combineContet : null
        }
      />
    </>
  );
};
export default Nft;
